<template>
  <div class="home">
    <div class="banner" @click="toPay()">
      <img src="@/assets/images/v2/banner.png" alt="banner" />
    </div>
    <div class="search-view">
      <div class="search-container">
        <div class="hot-search">
          热搜：
          <div
            v-for="item in hotwords"
            :key="item"
            class="hotword"
            @click="searchWord(item)"
          >
            {{ item }}
          </div>
        </div>
        <div class="search-bar">
          <el-input
            class="search-input"
            v-model="search_key"
            @keyup.enter.native="toSearch()"
            placeholder="在这里输入搜索关键词"
          ></el-input>
          <div class="search-btn" @click="toSearch()">
            <img src="@/assets/images/v2/search.png" alt="搜索" />
            <div>搜索</div>
          </div>
        </div>
        <div class="upload">
          <img src="@/assets/images/v2/upload.png" alt="上传" />
          <div>上传方案</div>
        </div>
      </div>
    </div>
    <div class="themes">
      <div class="theme-title">行业类型：</div>
      <div class="theme-list">
        <div
          :class="item.id == currentThemeId ? 'select-theme' : 'theme'"
          v-for="item in themelist"
          :key="item.id"
          @click="chooseTheme(item)"
        >
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="plans">
      <div
        class="plan"
        v-for="item in planlist"
        :key="item.id"
        @click="openDetail(item)"
      >
        <div class="cover">
          <el-image
            class="cover-img"
            :src="item.share_url"
            :fit="fit"
          ></el-image>
        </div>
        <div class="name">{{ item.name }}</div>
        <div class="sep"></div>
        <div class="info">
          <div>{{ item.timeText }}</div>
          <div class="vip-free">
            <img src="@/assets/images/v2/vip.png" alt="" />
            <div>VIP免费</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pageinfo">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :page-size.sync="currentPageSize"
        :current-page.sync="currentPage"
        :total="listTotal"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getIndexList } from "@/api/index.js";
import {
  reportDetailGuest,
  search,
  getCost,
  costTea,
  getMyThemes,
} from "@/api/report.js";
import storage from "@/utils/storage";
import { mapGetters } from "vuex";
import { Message } from "element-ui";

export default {
  data() {
    return {
      fit: "cover",
      currentPage: 1,
      currentPageSize: 16,
      listTotal: 0,
      hotwords: ["房地产", "餐饮", "电商", "服装", "酒类"],
      themelist: [],
      planlist: [],
      indexParam: {
        page: 1,
        pageSize: 16,
        theme_id: 0,
      },
      currentThemeId: 0,
      search_key: "",
    };
  },
  computed: {
    ...mapGetters(["sid", "token", "user_type"]),
  },
  components: {},
  created() {
    this.getThemes();
  },
  methods: {
    chooseTheme(item) {
      this.currentThemeId = item.id;
      this.getPlanList();
    },
    getThemes() {
      this.themelist = [];
      getMyThemes().then((res) => {
        // console.log("主题：", res);
        let first = {
          name: "全部",
          id: 0,
        };
        this.themelist = [first].concat(res.data.data);
        this.currentThemeId = this.themelist[0].id;
        this.getPlanList();
      });
    },
    toVip() {
      this.$store.commit("SET_SHOW", true);
    },
    // 点击热搜词
    searchWord(item) {
      if (!this.sid) {
        this.toLogin();
        return;
      }

      let { href } = this.$router.resolve({
        path: "/report",
        query: {
          search_key: item,
        },
      });
      if (process.client) {
        window.open(href, "_blank");
      }
    },
    toSearch() {
      if (!this.sid) {
        this.toLogin();
        return;
      }

      if (this.search_key == "") {
        this.$message.warning("请输入搜索内容");
        return false;
      }

      let { href } = this.$router.resolve({
        path: "/report",
        query: {
          search_key: this.search_key,
        },
      });
      if (process.client) {
        window.open(href, "_blank");
      }
    },

    getPlanList() {
      this.currentPage = 1;
      this.indexParam.page = this.currentPage;
      this.indexParam.theme_id = this.currentThemeId;
      getIndexList(this.indexParam).then((res) => {
        // console.log("方案：", res);
        this.planlist = res.data.files;
        this.currentPageSize = res.data.page_size;
        this.listTotal = res.data.total_count;
      });
    },

    // 下方页数变化
    pageChange() {
      this.indexParam.page = this.currentPage;
      getIndexList(this.indexParam).then((res) => {
        this.planlist = res.data.files;
        this.currentPageSize = res.data.page_size;
        this.listTotal = res.data.total_count;
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },

    toPay() {
      this.$router.push({
        path: "/aboutVip",
      });
    },
    toDetail(item) {
      let data = {
        sid: this.sid,
        fid: item.id || item.fid,
      };
      reportDetailGuest(data).then((res) => {
        this.openDetail(res.infor.detail);
      });
    },

    toLogin() {
      if (!this.sid) {
        this.$store.commit("SET_SHOW", true);
        return;
      }
    },

    openDetail(item) {
      if (!this.sid) {
        this.toLogin();
        return;
      }
      let fid = item.id;
      getCost(fid).then((res) => {
        console.log("剩余茶叶", res);
        let balance = res.data.balance;
        let need_cost = res.data.need_cost;
        if (need_cost == 0) {
          this.gotoDoc(item);
        } else {
          if (balance >= need_cost) {
            costTea(fid).then((res) => {
              console.log("消费茶叶", res);
              this.gotoDoc(item);
            });
            this.$store.dispatch("GetInfo");
          } else {
            Message({
              message: "您的茶叶余额不足，请充值后查看方案",
              type: "warning",
              duration: 2 * 1000,
            });
          }
        }
      });
    },

    gotoDoc(item) {
      storage.set("report", JSON.stringify(item));
      this.$store.commit("createReport", storage.get("report"));
      const { Base64 } = require("js-base64");
      let { href } = this.$router.resolve({
        path: "/detail?fid=" + Base64.encode(item.id),
      });
      window.open(href, "_blank");
    },

    openDetailRank(item) {
      //      console.log(item);
      storage.set("report", JSON.stringify(item));
      this.$store.commit("createReport", storage.get("report"));
      const { Base64 } = require("js-base64");
      let { href } = this.$router.resolve({
        path: "/detail?fid=" + Base64.encode(item.id),
      });
      window.open(href, "_blank");
    },
    share(item) {
      this.shareFid = item.fid || item.id;
      this.shareModal = true;
    },
    hotSearch(key) {
      if (!this.sid) {
        this.toLogin();
        return;
      }
      this.$router.push({
        path: "/report",
        query: {
          search_key: key,
        },
      });
    },
    industrySearch(key) {
      // if(!this.sid){
      //     this.$store.commit("SET_SHOW",true);
      //     return;
      // }
      this.$router.push({
        path: "/report",
        query: {
          theme_id: key,
        },
      });
    },

    getData(industryId) {
      this.industryId = industryId;
      this.searchParams.industryCategory = industryId;
      //      console.log(this.searchParams);
      //      console.log("this.searchParams");
      search(this.searchParams).then((res) => {
        this.list = res.data.data;

        setTimeout(() => {}, 2000);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: #f3f5f7;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner {
  width: 100%;
  aspect-ratio: 192 / 16;
  cursor: pointer;
  background: black;
  img {
    width: 100%;
    height: 100%;
  }
}

.search-view {
  background-color: white;
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-container {
  width: 100%;
  max-width: 1250px;
  height: 56px;
  display: flex;
  align-items: center;
}

.hot-search {
  display: flex;
  align-items: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #3f4750;
  margin-right: 32px;
}

.hotword {
  margin-right: 16px;
  font-weight: 400;
  cursor: pointer;
}

.search-bar {
  width: 772px;
  height: 36px;
  background: #ecf0f4;
  border-radius: 18px;
  border: 1px solid #cbd0d5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 1px;
}

.search-btn {
  width: 100px;
  height: 32px;
  background: #3373d4;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  color: #ffffff;
  img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}

/deep/ .el-input__inner {
  background: transparent !important;
  border: none;
}

.search-input {
  width: 660px;
}

.upload {
  cursor: pointer;
  margin-left: 32px;
  width: 100px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid #3373d4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #3373d4;
  img {
    width: 20px;
    height: 20px;
  }
}

.themes {
  width: 100%;
  max-width: 1250px;
  display: flex;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #3f4750;
  margin: 16px 0px;
}
.theme-title {
  width: 70px;
}
.theme-list {
  width: calc(100% - 70px);
  display: flex;
  flex-wrap: wrap;
}

.theme {
  font-weight: 400;
  color: #3f4750;
}

.select-theme {
  font-weight: 500;
  color: #3776d5;
}

.theme,
.select-theme {
  margin-right: 16px;
  margin-bottom: 8px;
  font-family: PingFangSC, PingFang SC;
  font-size: 14px;
  cursor: pointer;
}

.plans {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1250px;
}

.plan {
  width: calc(25% - 15px);
  background: #ffffff;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 20px;
  margin-right: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.cover {
  width: 100%;
  height: 160px;
}

.cover-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px 8px 0px 0px;
}

.name {
  margin: 16px;
  box-sizing: border-box;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  height: 48px;
  line-height: 24px;
  color: #3f4750;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}

.sep {
  background: #e9ebee;
  height: 1px;
  width: calc(100% - 32px);
}

.info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #8e969d;
}
.vip-free {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #e89e1d;
  display: flex;
  align-items: center;
  img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
}
.pageinfo {
  margin: 20px;
}
</style >
